<!--
 * @Description:  leftText:左侧文字
 * @Date: 2020-12-11 10:24:40
 * @LastEditors: lother
 * @LastEditTime: 2021-01-09 17:30:07
 * @FilePath: \AccountOpening-H5\src\components\header.vue
-->
<template>
    <div>
        <van-nav-bar
        :title="titleValue"
        :left-text="leftText"
        :right-text="rightText"
        class="nav"
        :placeholder ="true"
        safe-area-inset-top
        :z-index="100"
        :fixed="true"
        :border="false"
        >
        <template #left>
            <van-icon name="arrow-left"  :color="color" @click="back" v-show="leftShow"/>
            <van-icon name="cross" :color="color" @click="close"  class="nav-bar-close" v-show="closeShow" :class="!leftShow?'on':''" />
        </template>
        </van-nav-bar>
        <div class="w89" v-if="sliderShow">
            <div class="por slider">
                <div :style="{width:stepper}"></div>
                <p>{{$t('components.header.56398qlynck0')}}{{stepper}}</p>
            </div>
        </div>
        <van-dialog v-model="dialogShow"  show-cancel-button @confirm="confirm">
            <div class="content van-dialog__message">
                <p>{{$t('components.header.56398nmbtg80')}}</p>
            </div>
        </van-dialog>
    </div>
</template>
<script>
import {sizeColor} from '@/assets/less/global.less'
import {logout} from '@/api/login'
import  {removeToken} from '@/utils/auth'

export default {
    inject: ['StepsPage','page_info'],
    props:{
        leftText:{
            type:String,//左侧问题
            default:""
        },
        rightText:{
            type:String,//右侧文字
            default:""
        },
        title:{
            type:String,//中间文字
            default:()=>''
        },
        closeShow:{
            type:Boolean,//是否需要显示关闭按钮
            default:true
        },
        closeAPP:{
            type:Boolean,//后期内嵌app后按钮跳转不显示退出
            default:false
        },
        sliderShow:{
            type:Boolean,//是否显示开户进度条
            default:true,
        },
        backShow:{
            type:Boolean,//返回是否不走接口
            default:false
        },
        backUrl:{
            type:String,
            default:()=>''
        },
        leftShow:{
            type:Boolean,
            default:()=>true
        }
    },
    computed:{
        stepper(){
            var currPage =  (this.StepsPageList.index) <=0 ? 0 : (this.StepsPageList.index);
            var total_num =   this.StepsPageList.total ?? 1;
            return ((currPage /total_num )*100).toFixed(0)+'%'
        },
        titleValue(){
            return  this.$t('components.header.569yvle7v340')+
                    (JSON.parse(localStorage.getItem('common'))?.['terminal_'+this.langSuff] ?? '')+
                    this.$t('components.header.569yw53bjtc0')
            // return (this.$t('components.header.56398nmbufg0'))
        },
        color(){
            return sizeColor
        },
        code(){
            return this.$parent.code
        },
        firstPage(){
            return this.$route.name
        },
        StepsPageList(){
            return this.StepsPage()
        },
        page_infoId(){
            return  this.page_info().id??''
        },
        closeShowHide(){
            return this.closeShow
        },
         langSuff(){
            return this.$store.state.langSuff
        },
    },
    data() {
        return {
            show:false,
            dialogShow:false
        }
    },
    mounted(){
    },
    methods:{
        back(){
            if(JSON.stringify(this.StepsPageList)=='{}' || localStorage.getItem('isModify')==''){
                this.$router.replace('/')
            }
            if(this.StepsPageList.index==0 && localStorage.getItem('isModify')==1){  //审核失败的修改
                this.$router.replace({
                    path:'examine',
                })
                return false
            }
            if(this.backShow){
                if(!this.backUrl){
                    this.$router.go(-1)
                }else{
                    this.$router.replace({
                        path:this.backUrl,
                    })
                }
               return false
            }
            if(this.firstPage == 'documentType'){
                this.logout()
            }else if(this.StepsPageList.index==0){
                this.$routerTo('documentType')
                return false
            }else{
                this.$prevPage({pageId:this.StepsPageList.prev_id})
                .then(res=>{
                    this.$page(res,'prev')
                })
            }
        },
        close(){
            // this.show=true;
            console.log(this)

            if(!this.closeAPP){
                this.dialogShow=true
            }
        },
        onClickLeft(){
            console.log()
            this.$emit("onLeft")
        },
        onClickRight(){
            this.$emit("onRight")
        },
        confirm(){
            this.logout()
        },
        logout(){
            logout()
            .then(res=>{
                if(res.code==1){
                    removeToken()
                    location.reload()
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
    @{deep} .nav{
        // max-height: 46px !important;
        .van-nav-bar{
            background: @navColor;
        }
    }
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .content{
        padding: 0.4rem 0.24rem;
    }
    .block {
        width: 120px;
        height: 120px;
        background-color: @fff;
    }
    .nav-bar-close{
        margin-left: 0.2rem;
    }
    .nav-bar-close.on{
        margin-left: 0;
    }
    .slider{
        width: 100%;
        margin-top: 0.4rem;
        position: relative;
        p{
            font-size: 0.22rem;
            color: @btnColor;
            line-height: 0.24rem;
            text-align: right;
            padding-top: 0.2rem;
        }
        div{
            height: 0.1rem;
            border-radius:3px;
            background: @btnColor;
            position: relative;
            z-index: 1;
        }
        div::after{
            content: '';
            position: absolute;
            top: -0.07rem;
            width: 0.24rem;
            height: 0.24rem;
            background: @btnColor;
            right: 0rem;
            border-radius: 100%;
        }
    }
    .slider::after{
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 0.1rem;
        border-radius:3px;
        background: @sliderColor;
    }
</style>